import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default class TeamProjectMemberListComponent extends Component {
  @tracked showModal = false;
  @tracked editingMember = null;
  @tracked formData = {
    name: '',
    type: '前端',
    authCode: '',
    isHidden: 0
  };

  // 按类型分组人员
  get groupedMembers() {
    const types = ['前端', '后端', '测试'];
    return types.map(type => ({
      type,
      members: this.args.members ? this.args.members.filter(member => member.type === type) : []
    }));
  }

  // 获取类型对应的颜色
  getTypeColor(type) {
    const colors = {
      '前端': 'bg-blue-500',
      '后端': 'bg-green-500',
      '测试': 'bg-purple-500'
    };
    return colors[type] || 'bg-gray-500';
  }

  @action
  showAddModal() {
    this.editingMember = null;
    this.formData = {
      name: '',
      type: '前端',
      authCode: '',
      isHidden: 0
    };
    this.showModal = true;
  }

  @action
  editMember(member) {
    this.editingMember = member;
    this.formData = { ...member };
    this.showModal = true;
  }

  @action
  hideModal() {
    this.showModal = false;
    this.editingMember = null;
  }

  @action
  updateFormData(field, event) {
    this.formData = {
      ...this.formData,
      [field]: event.target.value
    };
  }

  @action
  saveMember(event) {
    event.preventDefault();
    
    if (!this.formData.name.trim()) {
      // 在实际应用中应该显示错误消息
      return;
    }

    if (this.editingMember) {
      // 更新现有人员
      this.args.onUpdateMember?.(this.editingMember.id, this.formData);
    } else {
      // 新增人员
      this.args.onAddMember?.(this.formData);
    }

    this.hideModal();
  }

  @action
  deleteMember(memberId) {
    if (confirm('确定要删除这个人员吗？')) {
      this.args.onDeleteMember?.(memberId);
    }
  }
}